$vtrg-act-color: #c19a6b; // Цвет увядших листьев
@mixin activated_state { box-shadow: 0 0 0 2px $vtrg-act-color inset; }

.vtrg-edit-wrapper {
  position: relative;
  min-height: 64px;

  // clearfix
  &:before, &:after { display: table; content: " "; }
  &:after { clear: both; }

  // ==== controls block ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ====
  .vtrg-edit-control {
    display: none;
    position: absolute;
    z-index: 99;
    &.top { top: 0; left: 0; }
    &.bottom { right: 0; bottom: 0; }
    padding: 4px;
    background: $vtrg-act-color;
    a { text-decoration: none; &:hover { fill: #fff; } }
    .icon { vertical-align: middle; }
  }
  &:hover    { @include activated_state; .vtrg-edit-control { display: block; } }
  &.editmode { @include activated_state; .vtrg-edit-control { display: none; } }
  &.blocked  {                           .vtrg-edit-control { display: none; } }

  // ==== block cover overlay ==== ==== ==== ==== ==== ==== ==== ==== ==== ====
  .vtrg-edit-block-cover {
    display: none;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: #eee;
    opacity: 0.8;
    text-align: center;
    fill: blue;
  }
  &.blocked .vtrg-edit-block-cover { display: block; }
}

// ==== add new block button ==== ==== ==== ==== ==== ==== ==== ==== ==== ====
.vtrg-add-new-wrapper { margin: 32px; }

.vtrg-add-new {
  display: block;
  text-align: center;
  &:hover { background: $vtrg-act-color + #333; fill: #666; }
  &:active { fill: #000; }
}

.vtrg-new-block-kinds {
  text-align: center;
  span { display: inline-block; margin-right: 6px; }
  span, a { vertical-align: middle; }
  a {
    display: inline-block;
    margin: 0 4px;
    width: 64px;
    height: 64px;
    cursor: pointer;
    &:hover { opacity: 0.6; }
    &:active { opacity: 1; }
  }
}
